<template>
	<view class="profile-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<text class="navbar-title">个人信息</text>
				<view class="navbar-right" @click="saveProfile">
					<text class="save-text">保存</text>
				</view>
			</view>
		</view>
		
		<!-- 头像区域 -->
		<view class="avatar-section">
			<view class="avatar-wrapper" @click="changeAvatar">
				<image 
					:src="userInfo.avatar || defaultAvatar" 
					mode="aspectFill"
					class="profile-avatar"
					@error="onImageError"
				></image>
				<view class="avatar-badge">
					<text class="camera-icon">📷</text>
				</view>
			</view>
			<text class="avatar-tips">点击更换头像</text>
		</view>
		
		<!-- 信息表单 -->
		<view class="form-container">
			<view class="form-card">
				<view class="form-item">
					<text class="form-label">昵称</text>
					<input 
						class="form-input" 
						v-model="userInfo.name"
						placeholder="请输入昵称"
						maxlength="20"
					/>
				</view>
				
				<view class="form-item">
					<text class="form-label">手机号</text>
					<input 
						class="form-input" 
						v-model="userInfo.phone"
						placeholder="请输入手机号"
						type="number"
						maxlength="11"
					/>
				</view>
				
				<view class="form-item">
					<text class="form-label">性别</text>
					<view class="gender-selector">
						<view 
							class="gender-option"
							:class="{ active: userInfo.gender === 'male' }"
							@click="selectGender('male')"
						>
							<text class="gender-icon">👨</text>
							<text class="gender-text">男</text>
						</view>
						<view 
							class="gender-option"
							:class="{ active: userInfo.gender === 'female' }"
							@click="selectGender('female')"
						>
							<text class="gender-icon">👩</text>
							<text class="gender-text">女</text>
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<text class="form-label">生日</text>
					<picker 
						mode="date" 
						:value="userInfo.birthday"
						@change="onBirthdayChange"
						class="date-picker"
					>
						<view class="picker-display">
							<text class="picker-text">{{ userInfo.birthday || '请选择生日' }}</text>
							<text class="picker-arrow">›</text>
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="form-label">个性签名</text>
					<textarea 
						class="form-textarea" 
						v-model="userInfo.signature"
						placeholder="写下你的个性签名..."
						maxlength="100"
						auto-height
					/>
					<text class="char-count">{{ (userInfo.signature || '').length }}/100</text>
				</view>
			</view>
		</view>
		
		<!-- 统计信息 -->
		<view class="stats-container">
			<view class="stats-card">
				<view class="stats-title">使用统计</view>
				<view class="stats-grid">
					<view class="stat-item">
						<text class="stat-number">{{ registerDays }}</text>
						<text class="stat-label">注册天数</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{ memoCount }}</text>
						<text class="stat-label">备忘录数</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{ favoriteCount }}</text>
						<text class="stat-label">收藏数</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import localStorage from '@/utils/storage.js'

export default {
	data() {
		return {
			userInfo: {
				name: '',
				phone: '',
				avatar: '',
				gender: '',
				birthday: '',
				signature: ''
			},
			defaultAvatar: '/static/tab/my.png',
			memoCount: 0,
			favoriteCount: 0,
			registerDays: 0
		}
	},
	
	onLoad() {
		this.loadUserInfo();
		this.loadStats();
	},
	
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		loadUserInfo() {
			const currentUser = localStorage.getCurrentUser();
			if (currentUser) {
				this.userInfo = {
					name: currentUser.name || currentUser.nickname || '',
					phone: currentUser.phone || '',
					avatar: currentUser.avatar || this.defaultAvatar,
					gender: currentUser.gender || '',
					birthday: currentUser.birthday || '',
					signature: currentUser.signature || ''
				};
				
				// 计算注册天数
				if (currentUser.createTime) {
					const register = new Date(currentUser.createTime);
					const now = new Date();
					const diff = now - register;
					this.registerDays = Math.floor(diff / (1000 * 60 * 60 * 24));
				}
			}
		},
		
		loadStats() {
			const statsResult = localStorage.getStats();
			if (statsResult.success) {
				this.memoCount = statsResult.data.totalMemos || 0;
				this.favoriteCount = statsResult.data.importantMemos || 0;
			}
		},
		
		changeAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.userInfo.avatar = res.tempFilePaths[0];
				},
				fail: (err) => {
					console.log('选择图片失败:', err);
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					});
				}
			});
		},
		
		selectGender(gender) {
			this.userInfo.gender = gender;
		},
		
		onBirthdayChange(e) {
			this.userInfo.birthday = e.detail.value;
		},
		
		onImageError() {
			// 图片加载失败时使用默认头像
			this.userInfo.avatar = '';
		},
		
		saveProfile() {
			// 基本验证
			if (!this.userInfo.name.trim()) {
				uni.showToast({
					title: '请输入昵称',
					icon: 'none'
				});
				return;
			}
			
			// 手机号验证
			if (this.userInfo.phone && !/^1[3-9]\d{9}$/.test(this.userInfo.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			
			// 保存用户信息
			const updateResult = localStorage.updateUserInfo(this.userInfo);
			
			if (updateResult.success) {
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
				
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} else {
				uni.showToast({
					title: '保存失败',
					icon: 'none'
				});
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.profile-container {
	width: 100%;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
}

.gradient-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	z-index: 0;
}

.custom-navbar {
	position: relative;
	z-index: 1;
	height: 88rpx;
	margin-top: var(--status-bar-height);
	background: transparent;
	padding-top: 60rpx;
}

.navbar-content {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.navbar-left {
	width: 80rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.navbar-left:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.95);
}

.back-icon {
	font-size: 36rpx;
	color: #fff;
	font-weight: bold;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.navbar-right {
	height: 60rpx;
	padding: 0 24rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.navbar-right:active {
	background: rgba(255, 255, 255, 0.8);
	transform: scale(0.95);
}

.save-text {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
}

.avatar-section {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 60rpx 0 40rpx;
}

.avatar-wrapper {
	position: relative;
	display: inline-block;
	margin-bottom: 20rpx;
}

.profile-avatar {
	width: 200rpx;
	height: 200rpx;
	border-radius: 100rpx;
	border: 8rpx solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
}

.avatar-badge {
	position: absolute;
	bottom: 10rpx;
	right: 10rpx;
	width: 60rpx;
	height: 60rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4rpx solid #fff;
	box-shadow: 0 6rpx 16rpx rgba(102, 126, 234, 0.4);
}

.camera-icon {
	font-size: 28rpx;
}

.avatar-tips {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.8);
}

.form-container {
	position: relative;
	z-index: 1;
	padding: 0 30rpx;
	margin-bottom: 30rpx;
	width: 100%;
	box-sizing: border-box;
}

.form-card {
	background: #ffffff;
	border-radius: 30rpx;
	padding: 40rpx;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.1);
	width: 100%;
	box-sizing: border-box;
}

.form-item {
	margin-bottom: 40rpx;
	position: relative;
}

.form-item:last-child {
	margin-bottom: 0;
}

.form-label {
	display: block;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 20rpx;
}

.form-input {
	width: 100%;
	height: 88rpx;
	background: #f8f9fa;
	border-radius: 16rpx;
	padding: 0 24rpx;
	font-size: 28rpx;
	color: #333;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.form-input:focus {
	background: #fff;
	border-color: #667eea;
	box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
}

.form-textarea {
	width: 100%;
	min-height: 120rpx;
	background: #f8f9fa;
	border-radius: 16rpx;
	padding: 20rpx 24rpx;
	font-size: 28rpx;
	color: #333;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
	resize: none;
	box-sizing: border-box;
}

.form-textarea:focus {
	background: #fff;
	border-color: #667eea;
	box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
}

.char-count {
	position: absolute;
	bottom: -30rpx;
	right: 0;
	font-size: 22rpx;
	color: #999;
}

.gender-selector {
	display: flex;
	gap: 20rpx;
}

.gender-option {
	flex: 1;
	height: 88rpx;
	background: #f8f9fa;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
	box-sizing: border-box;
	max-width: calc(50% - 10rpx);
}

.gender-option.active {
	background: rgba(102, 126, 234, 0.1);
	border-color: #667eea;
}

.gender-icon {
	font-size: 32rpx;
}

.gender-text {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.date-picker {
	width: 100%;
}

.picker-display {
	height: 88rpx;
	background: #f8f9fa;
	border-radius: 16rpx;
	padding: 0 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

.picker-text {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

.picker-arrow {
	font-size: 36rpx;
	color: #ccc;
	margin-left: 20rpx;
}

.stats-container {
	position: relative;
	z-index: 1;
	padding: 0 30rpx 40rpx;
}

.stats-card {
	background: #ffffff;
	border-radius: 30rpx;
	padding: 40rpx;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.1);
}

.stats-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 30rpx;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.stat-item {
	text-align: center;
	padding: 20rpx;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
	border-radius: 20rpx;
}

.stat-number {
	display: block;
	font-size: 40rpx;
	font-weight: 700;
	color: #667eea;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #666;
}
</style> 